<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
import md5 from 'js-md5';
import { userRegisterService, userLoginService } from '@/api/user.js';

import { useUserInfoStore } from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();

let registerData = ref({});
let loginData = ref({});

const register = async () => {
  userInfoStore.removeUserInfo();
  const md5RegisterData = {}
  md5RegisterData.name = registerData.value.name;
  md5RegisterData.phone = registerData.value.phone;
  md5RegisterData.password = md5(registerData.value.password);  // 传输经过一次加密的密码
  md5RegisterData.email = registerData.value.email;
  md5RegisterData.address = registerData.value.address;
  md5RegisterData.gender = registerData.value.gender;
  md5RegisterData.identity = registerData.value.identity;
  try {
    const result = await userRegisterService(md5RegisterData);
    if (result.code == 200) {
      ElMessage.success(result.msg);
    } else {
      ElMessage.error(result.msg);
    }
  } catch (error) {
    ElMessage.error("系统异常（register）");
    console.log(error)
  }
}
const login = async () => {
  userInfoStore.removeUserInfo();
  const md5LoginData = {}
  md5LoginData.account = loginData.value.account;
  md5LoginData.password = md5(loginData.value.password);  // 传输经过一次加密的密码
  md5LoginData.identity = loginData.value.identity;
  try {
    const result = await userLoginService(md5LoginData);
    if (result.code == 200) {
      userInfoStore.setUserInfo(result.data);
      switch (md5LoginData.identity) {
        case "1":
          router.push({ path: '/manager' });
          break;
        case "2":
          router.push({ path: '/employee' });
          break;
        case "3":
          router.push({ path: '/tenant' });
          break;
      }
      ElMessage.success(result.msg);
    }
    else {
      router.push({ path: '/login' });
      ElMessage.warning(result.msg);
    }
  } catch (error) {
    ElMessage.error("系统异常（login）");
    console.log(error)
  }
}
const checkedLogin = () => {
  if (loginData.value.identity == "1" || loginData.value.identity == "2" || loginData.value.identity == "3") {
    login();
  } else {
    ElMessage.error("未选择正确的身份！")
  }
}
const reset = function () {
  registerData.value = {};
  loginData.value = {};
}

let loginFlag = ref(1);
let title = ref('登录页面');
const switchForm = (state) => {
  if (state == 1) {
    loginFlag.value = 1;
    title.value = '登录页面';
    reset();
  } else {
    loginFlag.value = 0;
    title.value = '注册页面';
  }
}

</script>

<template>
  <br><br><br>
  <div class="welcome" display="flex">
    <div class="sub">
      <h1>
        <el-icon size="40px">
          <OfficeBuilding />
        </el-icon>
        高新园区物业管理系统
        <el-divider content-position="center">{{ title }}</el-divider>
      </h1>
    </div>
  </div>
  <br>
  <div class="form">
    <div class="sub">
      <el-form v-model="loginData" v-if="loginFlag == 1">
        <el-form-item label="账号">
          <el-input v-model="loginData.account" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginData.password" placeholder="请输入密码" show-password clearable />
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="loginData.identity" placeholder="请选择登录身份" clearable>
            <el-option label="管理员" value="1" />
            <el-option label="员工" value="2" />
            <el-option label="租户" value="3" />
          </el-select>
        </el-form-item>
        <div class="btn">
          <div class="sub">
            <el-form-item>
              <el-button type="primary" @click="checkedLogin">登录</el-button>
              <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
        <el-button text="text" type="info" @click="switchForm(0)">新用户注册→</el-button>

        <br><br><el-button type="warning" @click="router.push('/test')">测试页面</el-button>

      </el-form>

      <el-form id="register-from" v-model="registerData" v-else>

        <el-form-item label="姓名">
          <el-input v-model="registerData.name" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="registerData.phone" placeholder="请输入电话号（您的登录账号）" clearable />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registerData.password" placeholder="请输入密码" show-password clearable />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="registerData.email" placeholder="请输入邮箱" clearable />
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="registerData.address" placeholder="请输入住址" clearable />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="registerData.gender" placeholder="请选择性别" clearable>
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份">
          <el-select v-model="registerData.identity" placeholder="请选择登录身份" clearable>
            <el-option label="管理员" value="1" />
            <el-option label="员工" value="2" />
            <el-option label="租户" value="3" />
          </el-select>
        </el-form-item>


        <div class="btn">
          <div class="sub">
            <el-form-item>
              <el-button type="primary" @click="register(registerData)">注册</el-button>
              <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>

        <el-button text="text" type="info" @click="switchForm(1)">←返回登录</el-button>

        <br><br><el-button type="warning" @click="router.push('/test')">测试页面</el-button>

      </el-form>


    </div>
  </div>
</template>
  

  
<style>
.el-input {
  --el-input-width: 220px;
}

.welcome .form .tips-info .btn {
  display: flex;
}

.sub {
  display: flex;
  justify-content: center;
}
</style>
  